import React, { useEffect, useState } from 'react'
import './index.scss'
import Image from '../../components/Image'
import axios from '../../axios'
// import { subscribe, clearSubscribe } from '../../store'
// import Search from '../../components/Search/Search'

export default function Collection() {
  const [menuList, setMenuList] = useState([])
  // const [query, setQuery] = useState({keyword: '', searchType: '站内搜索'})
  // const [categories, setCategories] = useState([])

  useEffect(() => {
    axios.get('/collection/category').then(res => {
      // setCategories(res.data)
      const cateList = res.data
      console.log(cateList)
      axios.get('/collection').then(res => {
        const list = res.data
        console.log(list)
        setMenuList(cateList.map(item => {
          return {
            ...item,
            children: list.filter(cItem => {
              return cItem.category === item._id
            })
          }
        }))
      })
    })
  }, [])

  const to = (url) => {
    window.open(url)
  }
  const scrollToTarget = (id) => {
    window.location.href = `#${id}`
  }
  // const search = (data) => {
  //   const { keyword, searchType } = data
  //   if(searchType === 'bilibili') {
  //     window.open(`https://search.bilibili.com/all?keyword=${keyword}`)
  //   } else if (searchType === '百度') {
  //     window.open(`https://www.baidu.com/s?wd=${keyword}`)
  //   } else if (searchType === '必应') {
  //     window.open(`https://cn.bing.com/search?&q=${keyword}`)
  //   } else {
  //     alert('暂不支持该搜索方式')
  //   }
  // }
  return (
    <div className='collection'>
      <div className='category-list'>
        {
          menuList.map(item => {
            return (
              <div className='category-item' key={item._id} onClick={() => scrollToTarget(item._id)}>
                {item.name}
              </div>
            )
          })
        }
      </div>
      {/* <Search search={search}></Search> */}
      {
        menuList.map(list => {
          return (
            <section key={list._id} id={list._id} style={{width: '90%'}}>
              <span className='title'>{list.name}</span>
              <div className='list'>
                  {
                      list.children.map(listItem => {
                          return (
                              <div className='list-item default-hover' key={listItem._id}>
                                  <div className='head' onClick={() => to(listItem.url)}>
                                        <Image className="image" src={listItem.imageUrl || '/icon.png'}></Image>
                                        <span>{listItem.name}</span>
                                    </div>
                                  <div className='description two-line-clamp'>{listItem.description}</div>
                              </div>
                          )
                      })
                  }
              </div>
          </section>
          )
        })
        
      }
        
    </div>
  )
}
